<!--
 * @Author: Wangtao
 * @Date: 2022-05-27 13:50:08
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-06-15 19:36:57
-->
<template>
  <div class="box">
    <el-tabs v-model="activeName" stretch>
      <el-tab-pane label="智能回答" name="intelligentAnswer" v-if="!hideintelligentAnswer">
        <intelligentAnswer
          ref="intelligentAnswer"
          v-if="tabFlag.intelligentAnswer"
          @searchChange="searchChange"
          @hideRobotTab="hideRobotTab"
        ></intelligentAnswer>
      </el-tab-pane>
      <el-tab-pane label="知识库" name="knowledgeBase">
        <knowledgeBase
          ref="knowledgeBase"
          v-if="tabFlag.knowledgeBase"
          @searchChange="searchChange"
        ></knowledgeBase>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import knowledgeBase from './knowledgeBase.vue'
import intelligentAnswer from './intelligentAnswer.vue'
@Component({
  name: 'TopKnowLedgeBase',
  components: {
    knowledgeBase,
    intelligentAnswer
  }
})
export default class TopKnowLedgeBase extends Vue {
  @Prop({ default: false }) public visible!: boolean
  private activeName = 'intelligentAnswer'
  private hideintelligentAnswer = false
  private $bus: any
  private $store: any
  private searchContent = ''
  private tabFlag = {
    intelligentAnswer: false,
    knowledgeBase: false
  }

  private mounted () {
    (this.$bus as any).$on('topSearchHandle', ({ sessionId, content }) => {
      this.tabFlag = {
        intelligentAnswer: true,
        knowledgeBase: true
      }
      const robotId = this.getCurrentRobotByMessageId(sessionId, 'webchat_todo')
      this.setValue({ type: this.activeName, value: content, robotId })
      this.$emit('show')
    })
  }

  private getCurrentRobotByMessageId (messageId, webChatType) {
    const messageList = this.$store.state.webchat.webchatList[webChatType];
    let returnID = '';
    messageList.some((item) => {
      if (item._id === messageId) {
        if (item.robotAssistId) {
          returnID = item.robotAssistId;
        }
        return true;
      }
    })
    return returnID;
  }

  private setValue ({ value, type, robotId }: any) {
    if (robotId && type === 'intelligentAnswer') {
      (this.$refs as any)[type].setRobot(robotId);
    }
    (this.$refs as any)[type].setQuestion(value);
    (this.$refs as any)[type].searchFun();
    this.searchContent = value
  }

  private searchChange ({ value }) {
    this.searchContent = value
  }

  // 无开通机器人
  private hideRobotTab () {
    console.log('无机器人开通')
    this.hideintelligentAnswer = true
    this.activeName = 'knowledgeBase'
  }

  // 标记tab 防止一次初始化多个tab
  @Watch('activeName', { immediate: true })
  private activeNameChange (value) {
    this.tabFlag[value] = true;
    if (this.visible) {
      this.$nextTick(() => {
        this.setValue({ type: value, value: this.searchContent })
      })
    }
  }
}
</script>
<style scoped lang="stylus"></style>
